<template>
<div>
    <div style="margin-left: 20px;">
    <h3>修改里程碑</h3>
    </div>
    <el-form :model="ruleForm" style="width:80%" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="name">
          <el-input class="taskAdd-row-title" placeholder="请输入内容" size="medium" v-model="ruleForm.name" clearable></el-input>
        </el-form-item>

        <div class="milepstdate">
        <el-form-item label="开始日期" style="width:50%" prop="startDate">
              <el-date-picker v-model="ruleForm.startDate" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" style="width:50%" prop="endDate">
              <el-date-picker v-model="ruleForm.endDate" style="width:100%" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        </div>
        <!-- <el-form-item  label="关联仓库">
            <el-select style="width:100%" v-model="value3" multiple filterable allow-create default-first-option  placeholder="请选择文章标签">
             <el-option
               v-for="item in warehouse"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
        </el-form-item> -->
        <el-form-item  label="负责人" prop="masterUserId">
             <selectRoleTwo type='warehouse' :masterUserId='ruleForm.masterUserId' selectType='singleChoice' style="width:100%" @selectsuccess='selectsuccess'></selectRoleTwo>
        </el-form-item>
        <el-form-item label="简介">
              <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="ruleForm.content"></el-input>
            <!-- <quillEditor></quillEditor> -->
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
    </el-form>



</div>
</template>
<script>
import {save,queryById,update} from'@/api/mpt'
import quillEditor from '@/components/quillEditor/index'
 import multipleChoiceTags from '@/components/select/multipleChoiceTags'
 import selectRoleTwo from '@/components/screen/selectRoleTwo'
 export default({
     components: {
       quillEditor,selectRoleTwo
     },
     data () {
         return {
            ruleForm:{
                 name:"",
                 startDate:'',
                 endDate:'',
                 masterUserId:"",
                 content:""
             },
             rules: {
                 name: [
                     { required: true, message: '请输入活动名称', trigger: 'blur' },
                     ],
                 startDate: [
                     { required: true, message: '请选择计划开始时间', trigger: 'blur' },
                     ],
                 endDate: [
                     { required: true, message: '请选择计划结束时间', trigger: 'blur' },
                     ],
                 masterUserId: [
                     { required: true, message: '请选择负责人', trigger: 'blur' },
                     ],
            },
         }
     },
     created () {
       this.queryByIdclick()  
     },
     methods: {
         selectsuccess(data){
             this.ruleForm.masterUserId=data[0].userId
         },
        queryByIdclick(){
             let params=new URLSearchParams()
             params.append('id',this.$route.query.mptId)
             queryById(params).then(res=>{
                 this.ruleForm=res.data
             })
         },
        submitForm(ruleForm){
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
              update(this.ruleForm).then(res=>{
                  this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                        this.$router.go(-1)
                    })// 关闭当前tab回到列表   
              })
          }
        });
         },
         resetForm(){
           this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
                  this.$router.go(-1)
              })// 关闭当前tab回到列表    
         }
     }
 })
</script>
 <style scoped>
 .avatar{
     border-radius: 50%;
     width: 30px;
     /* height: 30px; */
 }
 .milepostselect{
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     /* height: 50px; */
     /* background-color: blanchedalmond; */
     justify-content: space-between;
 }
 .milepostselect_div{
      display: flex;
     align-items: center;
 }
 .milepstdate{
     display: flex;
     width: 100%;
 }
</style>
